<template>
    <div class="header">
        <div class="slogan">
            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
        </div>
        <div class="nav">
            <ul>
                <li class="logo">
                    <img src="../assets/img/head-logo_1564141048.3435316.svg" alt="">
                </li>
                <li class="ele">
                    <span>免费课</span>
                </li>
                <li class="ele">
                    <span>实战课</span>
                </li>
                <li class="ele">
                    <span>轻课</span>
                </li>
                <li class="ele">
                    <span>就业班</span>
                </li>
                <li class="ele">
                    <span>题库</span>
                </li>
                <li class="ele">
                    <span>学员成果</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
    .slogan {
        /*background-color: red;*/

        color: #aaa;
        font: normal 13px/40px '微软雅黑';
        background-color: #eee;
        height: 40px;
    }

    .slogan p {
        width: 1200px;
        margin: 0 auto;
    }

    .nav {
        background-color: antiquewhite;
    }

    .nav ul {
        width: 1200px;
        margin: 0 auto;
        padding: 15px 0;
    }

    .nav ul:after {
        clear: both;
        content: '';
        display: block;
    }

    .nav ul li {
        float: left;
    }

    .logo {
        margin-right: 40px;
    }

    .ele {
        margin: 0 20px;
    }

    .ele span {
        display: block;
        font: 15px/36px '微软雅黑';
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .ele span:hover {
        border-bottom-color: #ff6700;
    }
</style>